<!--
 * @Description: 
 * @version: 
 * @Author: wyx
 * @Date: 2020-09-27 20:18:35
 * @LastEditDate: Do not exit
-->
<template>
  <el-card class="card">
    <div class="title">
      <h4>安全中心</h4>
      <div  style="width:100%;background-color:rgb(240,240,240);height:2px"></div>
    </div>
    <div class="tbody">
        <div class="sty1">
            <el-avatar icon="el-icon-user-solid"></el-avatar>
            <div class="sty2">登录密码：</div>
            <div class="sty2 sty4"> 建议密码由6位以上数字、字母组成，并定期修改。 </div>
            <div class="sty2 sty3"><el-link href="/updatePass">修改</el-link></div>
        </div>
        <div class="sty1">
            <el-avatar icon="el-icon-mobile-phone"></el-avatar>
            <div class="sty2">绑定手机：</div>
            <div class="sty2 sty4">  可使用该手机登录和轻松找回密码，已绑定：{{phone}} </div>
            <div class="sty2 sty3"><el-link href="/updatePhone">修改</el-link></div>
        </div>
        <div class="sty1">
            <el-avatar icon="el-icon-message"></el-avatar>
            <div class="sty2">绑定邮箱：</div>
            <div class="sty2 sty4"> 可以使用邮箱登录、轻松找回密码，接收订单提醒信息，已绑定{{email}} </div>
            <div class="sty2 sty3"><el-link href="/updateEmail">修改</el-link></div>
        </div>
       
    </div>
  </el-card>
</template>

<script>
import ShareData from "@/utils/localStorage.js";
import{selectById}from '@/api/member.js'
export default {
data(){
    return{
        phone:"",
        email:"",
        memberId:"",
    }
},
mounted(){
  this.getInfo()
},
methods:{
  getInfo(){
    this.memberId=ShareData.getItem("memberId")
    selectById(this.memberId).then(res=>{
        console.log(res)
        if(res.data.code==="0000"){
          this.phone=res.data.data.phone.substring(0,3)+"****"+res.data.data.phone.substring(7)
          this.email=res.data.data.email
          
        }
      })
  }
}
}
</script>

<style lang="scss" scoped>
.card {
  padding: 3%;
  margin-bottom: 9%;
}
.title {
  text-align: left;
  margin-top: -20px;
}
.tbody{
     padding: 3%;
}
.sty1{
    display: flex;
    margin: 3%;
}
.sty2{
    margin-top: 8px;
    margin-left: 5px;
}
.sty4{
    flex: 7;
    margin-left: 100px;
    color: silver;
    text-align: left;
}
.sty3{
    flex: 1;
}
</style>